<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mydemo</title>
<style>
	div,input {margin:0;padding:0;}
	div {width:400px;height:200px;background-color:rgb(254,244,235);border:1px solid orange;margin:10px auto;padding:10px;}
	input {color:white;background-color:orange;font:12px/1.5 Arial;font-weight:700;border:none;cursor:pointer;}
</style>
<script>
	window.onload = function() {
		var oBox = document.getElementById("box");
		var oInput = document.getElementsByTagName("input");
		oInput[0].onclick = function () {
			var x = window.getComputedStyle(oBox,null);
			alert(
				"width: "+x.width+"\n"
				+"height: "+x.height+"\n"
				+"background-color: "+x.backgroundColor
				)
		}

		oInput[1].onclick = function () {
			oBox.style.cssText = "width:330px;height:100px;background-color:rgb(239,248,255);border:1px solid #00ffff";
			for(var i=0;i<oInput.length;i++) {oInput[i].style.cssText = "background-color:#00ffff";}
		}
		oInput[2].onclick = function () {
			for(var i=0;i<oInput.length;i++) {
				oBox.style.cssText = "";
				oInput[i].style.cssText = "";
			}
		}
	}
</script>
</head>
<body>
	<div id="box">
		<input type="button" value="Get Style">
		<input type="button" value="Set Style">
		<input type="button" value="Default Style">
	</div>
</body>
</html>